<template>
	<view>
		<!-- 搜索 -->
		<!-- <view class="search-block">
			<view class="search-ico-wapper">
				<input type="text" class="search-text" mode="widthFix" value="" />
			</view>
		</view> -->
			
		<!-- 轮播图 -->
		<view class="home">
			<swiper indicator-dots circular>
				<swiper-item v-for="item in swipers" :key="item.id">
					<image class="lunbotu" mode="aspectFill" :src="item.img"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 美食导航栏 -->
		<view class="nav">
			<view class="nav-item"  v-for="(item,index) in navs" :key="index" @click="navClick(item.path)">
				<view :class="item.icon"></view>
				<text>{{item.title}}</text>
			</view>
		</view>
		<view class="wnyx">
			<view class="wnyx-title">为你优选</view>
			<scroll-view scroll-x="true" class="scroll" scroll-with-animation="true">
				<view class="wnyx-bis">
					<block>
						<view class="wnyx-view">
							<image src="../../static/img/清蒸澳洲大龙虾.jpg" mode="aspectFill"></image>
						</view>
						<view class="wnyx-view">
							<image src="../../static/img/爆炒大盘鸡.jpg" mode="aspectFill"></image>
						</view>
						<view class="wnyx-view">
							<image src="../../static/img/下载%20(1).jpg" mode="aspectFill"></image>
						</view>
					</block>
				</view>
			</scroll-view>
		</view>
		<view class="fjsj">
			<view class="fjsj-title">附近商家</view>
			<view @click="poll()">
				<delicacy id="boxFixed" :class="{'is_fixed':isfixed}"></delicacy>
			</view>
		
			<view class="goods-list">
				<view class="goods-item" v-for="item in goods" :key="item.foodId">
					<image :src="item.foodImg" @click="pageCick()">
						<navigator class="confirm" url="../page/page1" open-type="switchTab" hover-class="other-navigator-hover">

						</navigator>
					</image>
					<view class="price">
						<text>￥{{item.foodPrice}}</text>
					</view>
					<view class="name">{{item.foodName}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import delicacy from '../../components/delicacy.vue'
	export default {
		data() {
			return {
				swipers: [],
				goods:[],
				menutop: '',
				rect: '',
				topdata: '',
				isfixed: false,
				navs: [{
						icon: 'iconfont icon-meishi',
						title: '美食',
						path: '/pages/goods/goods'
					},
					{
						icon: 'iconfont icon-tiandian',
						title: '甜点',
						path: '/pages/desserts/desserts'
					},
					{
						icon: 'iconfont icon-shuiguo',
						title: '水果',
						path: '/pages/good/good'
					},
					{
						icon: 'iconfont icon-youhuiquan',
						title: '优惠券',
						path: '/pages/good/good'
					}
				]
			}
		},
		onLoad() {
			this.getSwiper()
			this.getHotgoods()
			const query = wx.createSelectorQuery()
			query.select('#boxFixed').boundingClientRect()
			query.exec((res) => {
				this.menutop = res[0].top
				this.topdata = res[0].top
			})
		},
		components: {
			'delicacy': delicacy
		},
		methods: {
			getSwiper() {
				uni.request({
					url: 'http://localhost:8080/app/rotation', //仅为示例，并非真实接口地址。
					success: (res) => {
						this.swipers = res.data.message
					}
				})
			},
			poll() {
				wx.pageScrollTo({
					scrollTop: this.topdata,
					duration: 300
				})
			},
			// 获取附近商家数据
			 getHotgoods() {
				uni.request({
					url: 'http://localhost:8080/app/applist',
					success: (res) => {
						console.log(res)
						this.goods = res.data
					}
				})
				
			},
			
			// 导航点击
			navClick(url) {
				uni.navigateTo({
					url
				})
			},
			pageCick(url){
				uni.navigateTo({
					url: '../page/page1'
				})
			},
			onPageScroll(e) {
				// console.log(e.scrollTop)
				this.rect = e.scrollTop
			},

			// 计算属性
			computed: {
				namepage() {
					console.log('我是自动执行的')
					if (this.rect > this.menutop) {
						console.log('置顶')
						this.isfixed = true
					} else {
						console.log('不置顶')
						this.isfixed = false
					}
				}
			}
		}

	}
</script>

<style lang="scss">
	// .search-block {
	// 	display: flex;
	// 	justify-content: space-between;
	// 	align-items: center;
	// 	margin: 5rpx;

	// 	.search-ico-wapper {
	// 		width: 100%;
	// 		height: 60upx;
	// 		background: #FFD700;
	// 		border-radius: 20px;
	// 		box-sizing: border-box;
	// 		// background: rgba(6,5,8,0.1);

	// 		.search-text {
	// 			font-size: 35rpx;
	// 			height: 50rpx;
				
	// 		}
	// 	}
	// }

	.home {
		// margin: 10rpx;
		width: 100%;
		.lunbotu {
			width: 100%;
			height: 100%;
		}
	}

	.nav {
		display: flex;

		.nav-item {
			width: 25%;
			text-align: center;
			justify-content: center;
			

			view {
				width: 100rpx;
				height: 100rpx;
				background-color: #FFB90F;
				border-radius: 50rpx;
				margin: 10rpx auto;
				line-height: 100rpx;
				font-size: 60rpx;
			}

			.icon-tiandian {
				font-size: 90rpx;
				line-height: 90rpx;
			}

			.icon-meishi {
				font-size: 50rpx;
			}

			text {
				font-size: 30rpx;
			}
		}
	}

	.wnyx {
		margin: 20rpx;

		.wnyx-title {
			font-size: 38rpx;
			height: 30rpx;
			line-height: 30rpx;
			margin-bottom: 20rpx;
		}

		.scroll {
			white-space: nowrap;
			width: 100%;
			height: 220rpx;

			.wnyx-bis {
				display: flex;
				justify-content: space-between;

				.wnyx-view {
					width: 200px;
					height: 200rpx;
					padding: 0 8rpx;

					image {
						width: 300rpx;
						height: 200rpx;
						border-radius: 8rpx;
					}
				}
			}
		}
	}

	.fjsj {
		margin: 20rpx;

		.fjsj-title {
			font-size: 38rpx;
			height: 30rpx;
			line-height: 30rpx;
			margin-bottom: 20rpx;

		}

		.is_fixed {
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
		}

		.goods-list {
			padding: 70rpx 15rpx;
			flex-wrap: wrap;
			display: flex;
			justify-content: space-between;

			.goods-item {
				background-color: #FFFDEF;
				width: 330rpx;
				margin: 10rpx 0;
				padding: 15rpx;
				box-sizing: border-box;

				image {
					width: 100%;
					height: 130px;
					margin: 0 auto;
					display: block;
					margin: auto;
				}

				.price {
					color: #EEB422;
					font-size: 38rpx;
					margin: 15rpx 0 5rpx 0;

				}

				.name {
					font-size: 35rpx;
					line-height: 50rpx;
					padding-bottom: 15rpx;
					padding-top: 10rpx;
				}
			}
		}
	}
</style>
